import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { cardGroupDefaultProps } from './defaultProps';
import type { CardGroupOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface CardGroupProps extends CardGroupOptions, HTMLAttributes<HTMLDivElement> {}

const CardGroup: FC<CardGroupProps> = (props) => {
  const {
    className,
    link,
    horizontal,
    inverted,
    basic,
    columns,
    stackable,
    doubling,
    children,
    forwardedRef,
    ...cardGroupProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        { link, horizontal, inverted, basic, stackable, doubling },
        numberToWord(columns),
        'cards',
        className,
      ),
      ...cardGroupProps,
    },
    children,
  );
};

CardGroup.displayName = 'CardGroup';
CardGroup.defaultProps = cardGroupDefaultProps;

export default CardGroup;
